<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="css/basic.css" type="text/css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>阅读博客</title>
</head>
<script>
	var bid = "${blog.id}";
	var title = "${pass.name}";
	var uid = "${pass.id}";
	function showForm() {//打开/关闭评论窗口
		document.getElementById("dd").style.display = "block";
		document.getElementById("but").style.visibility = "hidden";
	}
	function showForm2(cid) {//打开/关闭评论窗口
		document.getElementById("dd"+cid).style.display = "block";
		document.getElementById("but"+cid).style.visibility = "hidden";
	}

	var xmlHttp;
	function contact(va) {
		var v2 = document.getElementById("content"+va).value;
		if (v2 == "")
			return;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlHttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		alert(v2);
		xmlHttp.onreadystatechange = commentCallback;
		xmlHttp.open("post", "http://localhost:8080/isdoub/CommentEdit?bid="
				+ bid + "&uid=" + uid + "+&ccid=" + va + "&content=" + v2
				+ "&title=" + title, true);
		xmlHttp.send(null);
	
	function commentCallback() {
		if (xmlHttp.readyState == 4) {
			document.getElementById("dd"+va).style.display = "none";
			document.getElementById("pinglun").innerHTML="发表成功";
		}
	}}
</script>
<c:if test="${pass==null }">
	<c:redirect url="login.jsp"></c:redirect>
</c:if>
<body style="text-align: center" onload="contect()">
	<div class="top">
		<!-- 目录 -->
		<a href="home.jsp"><button>主页</button></a> <a href="writeblog.jsp"><button>上传博客</button></a>
		<a href="userinfo.jsp"><button>${pass}</button></a> <a
			href="Login?action=leave"><button>退出登录</button></a>
	</div>
	<div style="width: 80%; left: 10%; position: relative;">
		<h1 align="center">${blog.title }</h1>
		<p>${author }</p>
		<p align="left">${blog.content }</p>
	</div>
	<button style="left: 0; position: relative;" onclick="showForm()">评论</button>
	<br>
	<!-- 评论窗口 -->
	<div id="dd" style="display: none;">
			标题<input type="text" name="title" value="${pass.name}"><br>
			<br>
			<textarea id="content" rows="5" cols="110"></textarea>
			<br>
		<button id="butt" onclick="contact('')">发表评论</button>
	</div>
	<br>
	<span id="pinglun"></span>
	<br>
	<div style="width: 85%;">
		<c:set var="pagesize" value="10" scope="page" />
		<!--记录数 -->
		<c:set var="number" value="${titles.size()}" scope="page" />
		<!-- 计算分页数 -->
		<c:set var="pagenumber" value="${param.start/pagesize+1}" />
		<ol>
			<c:choose>
				<c:when test="${empty comment}">
					<li>没有评论</li>
				</c:when>
				<c:otherwise>
					<c:forEach items="${comment}" var="row" begin="${param.start}"
						end="${param.start+pagesize-1}">
						<li style="text-align: left;">${row.title }&emsp;${row.time }</li>
						<p>${row.content }</p>
						<button id="but${row.id }" onclick="showForm2('${row.id}')">回复</button>
						<br>
						<div id="dd${row.id }" style="display: none;">
							<!-- 回复评论输入框 -->
							<textarea name="content" rows="1" cols="110" id="content${row.id }"></textarea>
							<button id="but3" onclick="contact('${row.id }')">发表</button>
							</div><br><br>
							<div
								style="position: relative; width: 85%; left:80px;background-color:silver;">
								<ol>
								<c:forEach items="${row.list }" var="mcomment" begin="0"
									end="${row.list.size()}">
									<li style="text-align: left;">${mcomment.title}</li>
									<span>${mcomment.content}&emsp;${mcomment.time}</span>
									<button id="but${mcomment.id }" onclick="showForm2('${mcomment.id}')">回复</button>
									<br>
									<div id="dd${mcomment.id }" style="display:none;">
										<textarea name="content" rows="1" cols="110" id="content${mcomment.id }"></textarea>
										<button id="but3" onclick="contact('${mcomment.id }')">发表</button>
										</div>
								</c:forEach></ol>
								</div>
					</c:forEach>
				</c:otherwise>
			</c:choose>
		</ol>
	</div>
</body>
</html>